<template>
	<view class="page-box">
		<view class="select-currency" @click="show = true">
			<view>{{$t('my.selectCurrency')}}</view>
			<view class="select-btn">
				<image :src="`../../static/img/my/${currencyCode}.png`" style="width: 40rpx; height: 40rpx;margin-right: 6rpx;"></image>
				{{currencyCode}}
				<image src="../../static/img/my/select-icon.png" style="width: 15rpx; height: 25rpx;margin-left: 6rpx;"></image>
			</view>
		</view>
		
		<!-- <view class="recharge-network">
			<view class="title-box">充值网络</view>
			<view class="select-network">
				选择网络
				<image src="../../static/img/my/ss.png" style="width: 20rpx; height: 11rpx;"></image>
			</view>
		</view> -->
		<view class="tip-box">{{$t('my.maxCurrency')}}：{{limit.maxOutAmount}}</view>
		<view class="money-box">
			<up-input
			    :placeholder="$t('trade.placeholder3')"
			    border="none"
			    v-model="money"
					@change="changeMoney"
					type="decimal"
			  ></up-input>
		</view>
		<!-- <view class="tip-box">{{$t('trade.available') + $t('robot.balance')}}：{{limit.maxOutAmount}}</view> -->
		
		<view class="money-box">
			<up-input
			    :placeholder="$t('my.placeholder1')"
			    border="none"
			    v-model="toAddress"
			  ></up-input>
		</view>
		
		<view class="recharge-network">
			<view class="title-box">
				{{$t('my.fee')}}
			<text>{{$t('my.fee')}}：0.03%</text>
			</view>
			<view class="select-network">
				<up-input
				    :placeholder="$t('my.fee')"
				    border="none"
						disabled="true"
						disabledColor="#ffffff"
				    v-model="commission"
				  ></up-input>
			</view>
		</view>
		
		
		<view class="btn-box">
			<u-button :text="$t('confirm')" type="success" shape="circle" color="#1C5FFF" @click="outBalanceFn"></u-button>
		</view>
		
		<up-picker :show="show" :columns="columns" keyName="currencyCode" closeOnClickOverlay @close="show = false" @cancel="show = false" @confirm="confirm"></up-picker>
		
		<view class="bottom-box"></view>
	</view>
</template>

<script setup>
	import { onLoad,onShow} from '@dcloudio/uni-app'
	import {outBalance,getcurrencyCode} from '@/common/api/common.js'
	import {ref} from 'vue';
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n();
	const money = ref('')
	const commission = ref('')
	const toAddress = ref('')
	const limit = ref({})
	const currencyCode = ref('USDC')
	const show = ref(false);
	const columns = ref([[]]);
	
	const changeMoney = e => {
		commission.value = e * 0.003
	}
	
	const outBalanceFn = async () => {
		if(!money.value){
			uni.$u.toast(t('trade.placeholder3'))
			return;
		}
		if(!toAddress.value){
			uni.$u.toast(t('my.placeholder2'))
			return;
		}
		if(Number(money.value) > Number(limit.maxOutAmount)) {
			uni.$u.toast(t('my.maxCurrency') + limit.maxOutAmount)
			return;
		}
		uni.showModal({
			title: '提示',
			content: '确认要进行提现吗？',
			success: function (res) {
				if (res.confirm) {
					// console.log('用户点击确定');
					outBalance({currencyCode: currencyCode.value,amount:money.value, toAddress:toAddress.value}).then(data => {
						if(data.status == 0){
							uni.$u.toast(t('success'))
							money.value = ''
						}
					})
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
	}
	
	const getcurrencyCodeFn = async () => {
		const res = await getcurrencyCode({currencyCode: '', page: 0, pageSize: 10})
		if (res.status == 0) {
			res.result.content.map((item,index) => {
				item.id = index + 1
			})
			columns.value[0] = res.result.content
			limit.value = res.result.content[0]
		} else {
			// uni.$u.toast(res.errorMessage)
		}
	}
	
	const confirm = (e) => {
	    show.value = false;
		if(e.value[0].currencyCode == 'XTTA') {
		  uni.$u.toast(t('notYetOpen'))
		  return
	   }
	  currencyCode.value = e.value[0].currencyCode
	  limit.value = e.value[0]
	  
	};
	
	onLoad((options) => {
		// getcurrencyCodeFn();
	})
	onShow((options) => {
		getcurrencyCodeFn();
	})
</script>

<style lang="scss" scoped>
	.page-box{
		padding: 40rpx;
		box-sizing: border-box;
		
		.select-currency{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #1f1f1f80;
			
			.select-btn{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #1f1f1f;
			}
		}
		
		.recharge-network{
			background-color: #f5f5f5;
			border-radius: 16rpx;
			padding: 40rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			color: #1f1f1f80;
			.title-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					font-size: 24rpx;
				}
			}
			
			.select-network{
				background-color: #ffffff;
				margin-top: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
			}
		}
		.money-box{
			background-color: #f5f5f5;
			border-radius: 16rpx;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #1f1f1f80;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}
		.tip-box{
			text-align: right;
			font-size: 24rpx;
			color: #1f1f1f80;
			padding-top: 20rpx;
		}
		
		.btn-box{
			margin: 50rpx auto 0;
			::v-deep .u-button{
				height:88rpx !important;
			}
		}
	}
</style>